<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body {
            padding: 20px;
            font-family: Arial;
        }
        
        .calc-wrap {
            width: 300px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        
        .calc-operation {
            width: 100%;
            border-collapse: collapse;
        }
        
        .calc-in-out {
            width: 100%;
            padding: 10px 20px;
            text-align: right;
            box-sizing: border-box;
            background-color: rgba(250, 250, 250, 0.9);
        }
        
        .calc-in-out p {
            overflow: hidden;
            margin: 5px;
            width: 100%;
        }
        
        .calc-history {
            margin-left: -20px;
            font-size: 18px;
            color: #bbb;
            border-bottom: 1px dotted #ddf;
            min-height: 23px;
        }
        
        .calc-in,
        .calc-out {
            font-size: 20px;
            color: #888;
            line-height: 39px;
            min-height: 39px;
        }
        
        .calc-in {
            color: #888;
        }
        
        .calc-out {
            color: #ccc;
        }
        
        .calc-in.active,
        .calc-out.active {
            font-size: 34px;
            color: #666;
        }
        
        .calc-operation td {
            padding: 10px;
            width: 25%;
            text-align: center;
            border: 1px solid #ddd;
            font-size: 26px;
            color: #888;
            cursor: pointer;
        }
        
        .calc-operation td:active {
            background-color: #ddd;
        }
        
        .calc-operation .clear {
            color: #ee8956;
        }
    </style>
</head>

<body>
    <h5>计算器</h5>
    <!-- 计算器 -->
    <div class="calc-wrap">
        <div class="calc-in-out">
            <!-- 上一条运算记录 -->
            <!-- <p class="calc-history" title=""></p> -->
            <!-- 输入的数据 -->
            <p class="calc-in"></p>
            <!-- 输出的运算结果 -->
            <p class="calc-out active"></p>
        </div>
        <table class="calc-operation">
            <thead></thead>
            <tbody>
                <tr>
                    <td data-ac="clear" class="clear">C</td>
                    <td data-ac="delete" class="delete">&larr;</td>
                    <td data-ac="square" class="char">x<sup>2</sup></td>
                    <td data-ac="×" class="char">&times;</td>
                </tr>
                <tr>
                    <td data-val="7" class="number">7</td>
                    <td data-val="8" class="number">8</td>
                    <td data-val="9" class="number">9</td>
                    <td data-ac="÷" class="char">&divide;</td>
                </tr>
                <tr>
                    <td data-val="4" class="number">4</td>
                    <td data-val="5" class="number">5</td>
                    <td data-val="6" class="number">6</td>
                    <td data-ac="+" class="char">+</td>
                </tr>
                <tr>
                    <td data-val="1" class="number">1</td>
                    <td data-val="2" class="number">2</td>
                    <td data-val="3" class="number">3</td>
                    <td data-ac="-" class="char">-</td>
                </tr>
                <tr>
                    <td data-ac="%" class="char">%</td>
                    <td data-val="0" class="number">0</td>
                    <td data-val="." class="number">.</td>
                    <td data-ac="eq" class="eq">=</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $(function() {
            var num1 = "",
                num2 = "",
                char = "",
                sum = "",
                state = false;

            $(".calc-operation tr td.number").on("click", function() {
                var value = $(this).data("val");

                if (char === "") {
                    if (state) {
                        num1 = "";
                        num2 = "";
                        state = false;
                    }

                    sum = num1 + value;
                    num1 = sum;
                    $(".calc-in").text(num1);
                } else if (char === "square") {
                    sum = num1 * num1;
                    num1 = sum1;
                    $(".calc-in").text(num1 * num1);
                } else {
                    num2 = num2 + value;
                    $(".calc-in").text(num1 + char + num2);
                }
            });

            $(".calc-operation tr td.char").on("click", function() {
                char = $(this).data("ac");
                // console.log(char);
                if (num1 === "") {
                    $(".calc-operation tr td.clear").click();
                }
                if (num2) {
                    $(".calc-out").empty("");
                    switch (char) {
                        case "+":
                            sum = parseFloat(num1) + parseFloat(num2);
                            break;
                        case "-":
                            sum = parseFloat(num1) - parseFloat(num2);
                            break;
                        case "×":
                            sum = parseFloat(num1) * parseFloat(num2);
                            break;
                        case "÷":
                            sum = parseFloat(num1) / parseFloat(num2);
                            break;
                        case "%":
                            sum = parseFloat(num1) % parseFloat(num2);
                            break;
                    }
                    // 把结果存入num1，清空num2，方便再次输入数
                    num1 = sum;
                    num2 = "";
                    char = "";
                    $(".calc-in").text(num1 + char);
                } else if (char === "square") {
                    sum = parseFloat(num1) * parseFloat(num1);
                    num1 = sum;
                    $(".calc-in").text(num1);
                } else {
                    $(".calc-in").text(num1 + char);
                }

                $(".calc-out").empty();
            });

            $(".calc-operation tr td.eq").on("click", function() {
                switch (char) {
                    case "+":
                        sum = parseFloat(num1) + parseFloat(num2);
                        break;
                    case "-":
                        sum = parseFloat(num1) - parseFloat(num2);
                        break;
                    case "×":
                        sum = parseFloat(num1) * parseFloat(num2);
                        break;
                    case "÷":
                        sum = parseFloat(num1) / parseFloat(num2);
                        break;
                    case "%":
                        sum = parseFloat(num1) % parseFloat(num2);
                        break;
                    case "square":
                        sum = parseFloat(num1);
                        break;
                }
                var dot = String(sum).indexOf(".");
                if (dot >= 0) {
                    var dotCnt = String(sum).substring(dot + 1, sum.length);
                    if (dotCnt.length > 2) {
                        sum = parseFloat(sum).toFixed(2);
                    }
                    num1 = sum;
                    num2 = "";
                    $(".calc-out").text("=  " + sum);
                } else {
                    num1 = sum;
                    num2 = "";
                    $(".calc-out").text("=  " + sum);
                }
            });

            // 清除键
            $(".calc-operation tr td.clear").on("click", function() {
                num1 = "";
                num2 = "";
                char = "";
                $(".calc-in").empty("");
                $(".calc-out").empty("");
            });

            // // 回退一步
            // $(".calc-operation tr td.delete").on("click", function() {
            //     if (num1) {
            //         var num1Arr = String(num1).substring(0, String(num1).length - 2);

            //
            //     }
            //     num1 = "";
            //     num2 = "";
            //     char = "";
            //     $(".calc-in").empty("");
            //     $(".calc-out").empty("");
            // });
        });
    </script>
</body>

</html>